<template>
  <view :class="['qui-page', header ? 'qui-page--padding' : '']">
    <!--
      放在这里是因为数据是异步请求的，然后判断论坛的显示状态。
      这样每个页面还是需要引入这个组件，一个是和主题相关，一个是和站点显示状态有关
    -->
    <!-- #ifdef H5-->
    <qui-header-back v-if="header"></qui-header-back>
    <!-- #endif -->
    <view v-if="loading" class="loading">
      <u-loading :size="60"></u-loading>
    </view>
    <qui-page-message v-else-if="showMessage"></qui-page-message>
    <view v-else><slot /></view>

    <!-- #ifdef MP-WEIXIN -->
    <uni-popup ref="auth" type="bottom">
      <qui-auth @login="login" @close="close"></qui-auth>
    </uni-popup>
    <!-- #endif -->
  </view>
</template>

<script>
import { mapState } from 'vuex';
import loginModule from '@/mixin/loginModule';
// #ifdef H5
import user from '@/mixin/user';
import forums from '@/mixin/forums';
// #endif
// #ifndef MP-WEIXIN
import appCommonH from '@/utils/commonHelper';
// #endif
export default {
  // #ifdef H5
  mixins: [forums, appCommonH, user, loginModule],
  // #endif
  props: {
    header: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      isRun: false,
    };
  },
  computed: {
    ...mapState({
      forumError: state => state.forum.error,
    }),
    loading() {
      return this.forumError.loading;
    },
    showMessage() {
      return (
        [
          'not_install',
          'site_closed',
          'ban_user',
          'model_not_found',
          'dataerro',
          'permission_denied',
        ].indexOf(this.forumError.code) !== -1
      );
    },
  },
  watch: {
    forumError(newValue) {
      if (newValue.loading === false && !newValue.code) {
        this.$emit('pageLoaded');
      }
    },
    // #ifdef H5
    $route: {
      handler(val, oldVal) {
        if (val.path !== oldVal.path && !this.isRun) {
          this.isRun = true;
          uni.$emit('apploaded');
          this.isRun = false;
        }
      }, // 深度观察监听
      deep: true,
    },
    // #endif
  },
  mounted() {
    // #ifdef MP-WEIXIN
    this.$store.dispatch('session/setAuth', this.$refs.auth);
    // #endif
  },
  methods: {
    // #ifdef MP-WEIXIN
    open() {
      if (!this.loading && !this.showMessage && !this.$store.getters['session/get']('isLogin')) {
        this.$refs.auth.open();
      }
    },
    close() {
      this.$refs.auth.close();
    },
    login() {
      this.$refs.auth.close();
    },
    // #endif
  },
};
</script>

<style lang="scss">
@import '@/styles/base/variable/global.scss';
@import '@/styles/base/theme/fn.scss';

.qui-page {
  width: 100%;
  min-height: 100%;
  color: --color(--qui-FC-333);
  background-color: --color(--qui-BG-1);
  box-sizing: border-box;
  transition: $switch-theme-time;
  &--padding {
    /* #ifdef H5 */
    padding-top: 44px;
    /* #endif */
  }
}
</style>
